<template>
	<image
		class="ancestral_detail_bgc"
		:style="{ width: clientWidth + 'px' }"
		:src="
			dataObj.renoveBackground
				? dataObj.renoveBackground
				: 'http://112.124.50.179:8888/imgs/home/temple_bgc.png'
		"
		mode="aspectFill"
	></image>
	<view class="content">
		<view class="header">
			<view class="header_con">
				<view class="back" @click="back">
					<image src="http://112.124.50.179:8888/imgs/home/BACK.png" mode=""></image>
				</view>
				<!-- <view class="header_icon" v-if="!isShow">
					<image
						src="http://112.124.50.179:8888/imgs/home/MUSIC.png"
						mode=""
						class="music"
					></image>
					<image
						src="http://112.124.50.179:8888/imgs/home/MORE_.png"
						mode=""
						@click="showMore"
					></image>
				</view> 
				<view
					v-else
					class="header_records"
					@click="goUrl('/subPages/home/ancestralTemple/decorate_records')"
				>
					装修记录
				</view>-->
			</view>
		</view>
		<view class="temple_detail_tablet">
			<image class="chair_top" src="http://112.124.50.179:8888/imgs/home/temple_chair1.png" mode=""></image>
			<image class="chair_bottom" src="http://112.124.50.179:8888/imgs/home/temple_chair2.png" mode=""></image>
			<view class="temple_detail_tablet_middle">
				<image
					:src="
						dataObj.renoteLingwei
							? dataObj.renoteLingwei
							: 'http://112.124.50.179:8888/imgs/home/temple_tablet_middle.png'
					"
					mode=""
				></image>
				<view>祖先灵位</view>
			</view>
			<view class="temple_detail_row" style="padding: 0 100rpx; top: 0rpx">
				<view class="temple_detail_left">
					<view class="temple_detail_tablet_item" style="margin-right: 16rpx">
						<image
							src="http://112.124.50.179:8888/imgs/home/tablet.png"
							mode=""
						></image>
						<view
							class="tablet_name tablet_name_chinese"
							v-if="tabletList[3].tabletName"
						>
							{{ tabletList[3].tabletName }}
						</view>
						<view class="tablet_name" v-else>3</view>
					</view>
					<view class="temple_detail_tablet_item" style="margin-right: 16rpx">
						<image
							src="http://112.124.50.179:8888/imgs/home/tablet.png"
							mode=""
						></image>
						<view
							class="tablet_name tablet_name_chinese"
							v-if="tabletList[1].tabletName"
						>
							{{ tabletList[1].tabletName }}
						</view>
						<view class="tablet_name" v-else>3</view>
					</view>
				</view>
				<view class="temple_detail_right">
					<view class="temple_detail_tablet_item" style="margin-right: 16rpx">
						<image
							src="http://112.124.50.179:8888/imgs/home/tablet.png"
							mode=""
						></image>
						<view
							class="tablet_name tablet_name_chinese"
							v-if="tabletList[2].tabletName"
						>
							{{ tabletList[2].tabletName }}
						</view>
						<view class="tablet_name" v-else>2</view>
					</view>
					<view class="temple_detail_tablet_item" style="margin-right: 16rpx">
						<image
							src="http://112.124.50.179:8888/imgs/home/tablet.png"
							mode=""
						></image>
						<view
							class="tablet_name tablet_name_chinese"
							v-if="tabletList[4].tabletName"
						>
							{{ tabletList[4].tabletName }}
						</view>
						<view class="tablet_name" v-else>4</view>
					</view>
				</view>
			</view>
			<view class="temple_detail_row" style="padding: 0 55rpx; top: 30rpx">
				<view class="temple_detail_left">
					<view class="temple_detail_tablet_item" style="margin-right: 30rpx">
						<image
							src="http://112.124.50.179:8888/imgs/home/tablet.png"
							mode=""
						></image>
						<view
							class="tablet_name tablet_name_chinese"
							v-if="tabletList[7].tabletName"
						>
							{{ tabletList[7].tabletName }}
						</view>
						<view class="tablet_name" v-else>7</view>
					</view>
					<view class="temple_detail_tablet_item" style="margin-right: 30rpx">
						<image
							src="http://112.124.50.179:8888/imgs/home/tablet.png"
							mode=""
						></image>
						<view
							class="tablet_name tablet_name_chinese"
							v-if="tabletList[5].tabletName"
						>
							{{ tabletList[5].tabletName }}
						</view>
						<view class="tablet_name" v-else>5</view>
					</view>
					<view class="temple_detail_tablet_item" style="margin-right: 30rpx">
						<image
							src="http://112.124.50.179:8888/imgs/home/tablet.png"
							mode=""
						></image>
						<view
							class="tablet_name tablet_name_chinese"
							v-if="tabletList[9].tabletName"
						>
							{{ tabletList[9].tabletName }}
						</view>
						<view class="tablet_name" v-else>9</view>
					</view>
				</view>
				<view class="temple_detail_right">
					<view class="temple_detail_tablet_item" style="margin-right: 30rpx">
						<image
							src="http://112.124.50.179:8888/imgs/home/tablet.png"
							mode=""
						></image>
						<view
							class="tablet_name tablet_name_chinese"
							v-if="tabletList[10].tabletName"
						>
							{{ tabletList[10].tabletName }}
						</view>
						<view class="tablet_name" v-else>10</view>
					</view>
					<view class="temple_detail_tablet_item" style="margin-right: 30rpx">
						<image
							src="http://112.124.50.179:8888/imgs/home/tablet.png"
							mode=""
						></image>
						<view
							class="tablet_name tablet_name_chinese"
							v-if="tabletList[6].tabletName"
						>
							{{ tabletList[6].tabletName }}
						</view>
						<view class="tablet_name" v-else>6</view>
					</view>
					<view class="temple_detail_tablet_item" style="margin-right: 30rpx">
						<image
							src="http://112.124.50.179:8888/imgs/home/tablet.png"
							mode=""
						></image>
						<view
							class="tablet_name tablet_name_chinese"
							v-if="tabletList[8].tabletName"
						>
							{{ tabletList[8].tabletName }}
						</view>
						<view class="tablet_name" v-else>8</view>
					</view>
				</view>
			</view>
			<view class="temple_detail_row" style="padding: 0 10rpx; top: 72rpx">
				<view class="temple_detail_left">
					<view class="temple_detail_tablet_item" style="margin-right: 26rpx">
						<image
							src="http://112.124.50.179:8888/imgs/home/tablet.png"
							mode=""
						></image>
						<view
							class="tablet_name tablet_name_chinese"
							v-if="tabletList[17].tabletName"
						>
							{{ tabletList[17].tabletName }}
						</view>
						<view class="tablet_name" v-else>17</view>
					</view>
					<view class="temple_detail_tablet_item" style="margin-right: 26rpx">
						<image
							src="http://112.124.50.179:8888/imgs/home/tablet.png"
							mode=""
						></image>
						<view
							class="tablet_name tablet_name_chinese"
							v-if="tabletList[15].tabletName"
						>
							{{ tabletList[15].tabletName }}
						</view>
						<view class="tablet_name" v-else>15</view>
					</view>
					<view class="temple_detail_tablet_item" style="margin-right: 26rpx">
						<image
							src="http://112.124.50.179:8888/imgs/home/tablet.png"
							mode=""
						></image>
						<view
							class="tablet_name tablet_name_chinese"
							v-if="tabletList[13].tabletName"
						>
							{{ tabletList[13].tabletName }}
						</view>
						<view class="tablet_name" v-else>13</view>
					</view>
					<view class="temple_detail_tablet_item" style="margin-right: 26rpx">
						<image
							src="http://112.124.50.179:8888/imgs/home/tablet.png"
							mode=""
						></image>
						<view
							class="tablet_name tablet_name_chinese"
							v-if="tabletList[11].tabletName"
						>
							{{ tabletList[11].tabletName }}
						</view>
						<view class="tablet_name" v-else>11</view>
					</view>
				</view>
				<view class="temple_detail_right">
					<view class="temple_detail_tablet_item" style="margin-right: 26rpx">
						<image
							src="http://112.124.50.179:8888/imgs/home/tablet.png"
							mode=""
						></image>
						<view
							class="tablet_name tablet_name_chinese"
							v-if="tabletList[12].tabletName"
						>
							{{ tabletList[12].tabletName }}
						</view>
						<view class="tablet_name" v-else>12</view>
					</view>
					<view class="temple_detail_tablet_item" style="margin-right: 26rpx">
						<image
							src="http://112.124.50.179:8888/imgs/home/tablet.png"
							mode=""
						></image>
						<view
							class="tablet_name tablet_name_chinese"
							v-if="tabletList[14].tabletName"
						>
							{{ tabletList[14].tabletName }}
						</view>
						<view class="tablet_name" v-else>14</view>
					</view>
					<view class="temple_detail_tablet_item" style="margin-right: 26rpx">
						<image
							src="http://112.124.50.179:8888/imgs/home/tablet.png"
							mode=""
						></image>
						<view
							class="tablet_name tablet_name_chinese"
							v-if="tabletList[16].tabletName"
						>
							{{ tabletList[16].tabletName }}
						</view>
						<view class="tablet_name" v-else>16</view>
					</view>
					<view class="temple_detail_tablet_item" style="margin-right: 26rpx">
						<image
							src="http://112.124.50.179:8888/imgs/home/tablet.png"
							mode=""
						></image>
						<view
							class="tablet_name tablet_name_chinese"
							v-if="tabletList[18].tabletName"
						>
							{{ tabletList[18].tabletName }}
						</view>
						<view class="tablet_name" v-else>18</view>
					</view>
				</view>
			</view>
		</view>

		<view class="temple_detail">
			<view class="fixed_con_" @click="openRenovationTemple">
				<image
					src="http://112.124.50.179:8888/imgs/home/temple_decorate.png"
					mode=""
				></image>
				<text>装修祠堂</text>
			</view>
			<view class="temple_detail_name">
				<image
					:src="
						dataObj.renotePaibian
							? dataObj.renotePaibian
							: 'http://112.124.50.179:8888/imgs/home/temple_name.png'
					"
					mode=""
				></image>
				<view class="temple_detail_name_text">{{ convertString('功德伟业') }}</view>
			</view>
		</view>
		<view class="invite" @click="copyInviteCode">
			复制邀请码
			<image src="http://112.124.50.179:8888/imgs/home/copy.png"></image>
		</view>
		<view class="fixed" v-if="!showAnimation">
			<!-- <Bubble :list="dataObj.consecrateList" /> -->
			<Bubble :list="[1, 2, 3]" />
			<view class="fixed_con">
				<!-- <view class="fixed_con_" @click="openLeaveMess">
					<image
						src="http://112.124.50.179:8888/imgs/home/temple_decorate_func1.png"
						mode=""
					></image>
					<text>留言</text>
				</view> -->
				<view class="fixed_con_" @click="addOilRef.show = true">
					<image
						src="http://112.124.50.179:8888/imgs/home/temple_decorate_func2.png"
						mode=""
					></image>
					<text>香油</text>
				</view>
				<view class="fixed_con_" @click="openOblation">
					<image
						src="http://112.124.50.179:8888/imgs/home/temple_decorate_func3.png"
						mode=""
					></image>
					<text>祭品</text>
				</view>
				<view class="fixed_con_" @click="koubaiRef.show = true">
					<image
						src="http://112.124.50.179:8888/imgs/home/temple_decorate_func4.png"
						mode=""
					></image>
					<text>行礼</text>
				</view>
				<view
					class="fixed_con_"
					@click="goUrl('/subPages/home/ancestralTemple/brief_introduction')"
				>
					<image
						src="http://112.124.50.179:8888/imgs/home/temple_decorate_func5.png"
						mode=""
					></image>
					<text>简介</text>
				</view>
			</view>
		</view>
	</view>

	<!-- 右边功能 -->
	<view
		v-if="!showAnimation"
		class="temple_detail_funcList"
		:style="{ right: windowWidth / 2 - clientWidth / 2 + 20 + 'px' }"
	>
		<view class="temple_detail_fucItem">
			<image :src="imgUrl + 'imgs/home/temple_music.png'" mode="" class="music"></image>
			音乐
		</view>
		<view
			class="temple_detail_fucItem"
			@click="goUrl('/subPages/home/ancestralTemple/memorial_tablet')"
		>
			<image :src="imgUrl + 'imgs/home/temple_pai.png'" mode=""></image>
			牌位信息
		</view>
		<view
			class="temple_detail_fucItem"
			@click="goUrl('/subPages/home/ancestralTemple/position')"
		>
			<image :src="imgUrl + 'imgs/home/temple_real.png'" mode=""></image>
			真实祠堂
		</view>
		<view class="temple_detail_fucItem" @click="showMore">
			<image :src="imgUrl + 'imgs/home/temple_more.png'" mode=""></image>
			更多
		</view>
	</view>

	<!-- 特效 -->
	<view class="texiao_box">
		<view class="gif">
			<image
				class="gb"
				:src="imgUrl + '/imgs/home/gb.gif'" 
				v-if="animation.gb"
			></image>
			<image
				class="jg"
				:src="imgUrl + '/imgs/home/jg.gif'" 
				v-if="animation.jg"
			></image>
		</view>
	</view>

	<u-popup
		:show="showMoreFunc"
		bgColor="rgba(0,0,0,0)"
		@close="closeMore"
		custom-style="padding:0 16rpx 0;"
	>
		<u-button
			v-if="isSelf == 1 || isSelf == 2"
			@click="goUrl('/subPages/home/ancestralTemple/memorial_tablet')"
			shape="circle"
			:custom-style="{ ...moreBtnStyle, marginBottom: 0, borderRadius: '26rpx 26rpx 0 0' }"
		>
			牌位管理
		</u-button>
		<u-button
			v-if="isSelf == 1"
			@click="goUrl('/subPages/home/ancestralTemple/setting')"
			shape="circle"
			:custom-style="{ ...moreBtnStyle, marginBottom: 0, borderRadius: '0' }"
		>
			祠堂设置
		</u-button>
		<u-button
			v-if="isSelf == 1 || isSelf == 2"
			@click="
				goUrl(
					'/subPages/home/ancestralTemple/friendGroup?dataObj=' + JSON.stringify(dataObj)
				)
			"
			shape="circle"
			:custom-style="{ ...moreBtnStyle, marginBottom: 0, borderRadius: '0' }"
		>
			祠堂族员管理
		</u-button>
		<u-button
			@click="goUrl('/subPages/home/ancestralTemple/Memorial')"
			shape="circle"
			:custom-style="{
				...moreBtnStyle,
				marginBottom: 0,
				borderRadius: isSelf == 3 ? '26rpx 26rpx 0 0' : 0
			}"
		>
			供奉记录
		</u-button>
		<u-button
			shape="circle"
			@click="openInvite"
			:custom-style="{
				...moreBtnStyle,
				marginBottom: 0,
				borderRadius: isSelf == 1 ? '0 0 26rpx 26rpx' : 0
			}"
		>
			分享
		</u-button>
		<u-button
			v-if="isSelf == 2 || isSelf == 3"
			shape="circle"
			@click="report"
			:custom-style="{ ...moreBtnStyle, marginBottom: 0, borderRadius: ' 0 0 26rpx 26rpx' }"
		>
			举报
		</u-button>

		<u-button
			shape="circle"
			:custom-style="{
				...moreBtnStyle,
				fontWeight: 600,
				borderRadius: '26rpx',
				marginTop: '16rpx'
			}"
			@click="closeMore"
		>
			取消
		</u-button>
	</u-popup>

	<!-- 送取祭品 -->
	<oblation ref="oblationRef" :offeringType="5" />

	<!-- 留言弹框 -->
	<leaveMess ref="leaveMessRef" />

	<!-- 添香油弹框 -->
	<addOil ref="addOilRef" @query="query" />

	<!-- 行礼弹框 -->
	<koubai ref="koubaiRef" @koubai="handleKoubai"></koubai>
	 
	<RenovationTemple
		ref="RenovationTempleRef"
		@close_="isShow = false"
		@query="query"
		:belongingTo="3"
	/>
	<sharePopup
		v-model:show="showShare"
		title="分享到"
		height="592rpx"
		:invitedCode="dataObj.invitationCode"
		:isInvitedCode="true"
	></sharePopup>
</template>

<script setup>
import { reactive, onMounted, ref, getCurrentInstance } from 'vue';
import { onShow, onLoad, onReady, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import oblation from '@/subPages/common/oblation.vue';
import { imgUrl } from '@/external/utils/imgUrl';
import RenovationTemple from '../common/renovation_memoryHall.vue';
import leaveMess from '../common/leaveMess.vue';
import addOil from '../common/addOil.vue';
import koubai from '@/subPages/common/koubai.vue';
import sharePopup from '/components/popup/share.vue';
import Bubble from '@/components/bubble/index.vue';
import HomeApi from '@/API/home/index.js';
const homeApi = new HomeApi();

const windowWidth = uni.getSystemInfoSync().windowWidth;
const clientWidth = document?.body.clientWidth || uni.getSystemInfoSync().windowWidth;

onShow(() => {
	showMoreFunc.value = false;
});
onLoad((o) => {
	if (o.isShow) {
		setTimeout(() => {
			openRenovationTemple();
		}, 1);
	}
	query();
});
const tabletList = ref(new Array(19).fill('')); //牌位信息
const showMoreFunc = ref(false);
const moreBtnStyle = {
	height: '120rpx',
	backgroundColor: '#fff',
	fontWeight: '400',
	fontSize: '40rpx',
	color: '#007AFF',
	marginBottom: '16rpx'
};
const showShare = ref(false);
let height = ref('0');
let navHeight = ref('0');
let tabIndex = ref(0);
let isSelf = ref(-1);
let isShow = ref(false);
let dataObj = ref({});
const oblationRef = ref();
const RenovationTempleRef = ref();
const leaveMessRef = ref();
const addOilRef = ref();
const koubaiRef = ref();

//动画
const animation = reactive({
	jg: false,
	gb: false
});
const showAnimation = ref(false);
let timer = ref(null);

const query = () => {
	homeApi
		.getHallInfoApi({
			hallId: uni.getStorageSync('hallId')
		})
		.then((res) => {
			isSelf.value = res.data.userType;
			dataObj.value = res.data;
			res.data.tabletList.forEach((ele, index) => {
				tabletList.value[ele.tabletIndex] = ele;
			});
		})
		.catch(() => {});
};
/**
 * 打开祭品弹框
 */
const openOblation = () => {
	oblationRef.value.show = true;
};
const openRenovationTemple = () => {
	RenovationTempleRef.value.show = true;
	isShow.value = true;
};
/**
 * 打开留言弹框
 */
const openLeaveMess = () => {
	leaveMessRef.value.show = true;
};

const convertString = (string) => {
	return string.split('').reverse().join('');
};

const showMore = (item) => {
	showMoreFunc.value = true;
};
const closeMore = () => {
	showMoreFunc.value = false;
};
const setTab = (index) => {
	tabIndex.value = index;
};
const back = () => {
	uni.navigateBack({
		delta: 1
	});
};
const goUrl = (url) => {
	uni.navigateTo({
		url: url
	});
};

const openInvite = () => {
	showShare.value = true;
};
const copyInviteCode = () => {
	uni.setClipboardData({
		data: dataObj.value.invitationCode,
		success: function () {
			uni.showToast({
				title: '复制成功'
			});
		},
		fail: function (err) {
			console.log('复制失败', err);
		}
	});
};
const report = () => {
	uni.navigateTo({
		url: '/subPages/chaoshan/report?reportType=7&&reportedId=' + uni.getStorageSync('hallId')
	});
};

/**
 * 叩拜行礼
 */
const handleKoubai = (item, index) => {
	// let res = await worshipApi.kowtow({
	// 	worshipPeopleId: peopleId.value,
	// 	kowtowType: item.name
	// });
	// if (res.code === 0) {
	// 	koubaiRef.value.show = false;
	// 	showGif(index);
	// }
	koubaiRef.value.show = false;
	showGif(index);
};

/**
 * 展示动图
 */
const showGif = (type) => {
	if (type === 1) {
		//跪拜
		showAnimation.value = true;
		if (!timer.value) {
			animation.gb = true;
			timer.value = setTimeout(() => {
				animation.gb = false;
				timer.value = null;
				showAnimation.value = false;
			}, 6500);
		}
	} else if (type === 2) {
		//鞠躬
		showAnimation.value = true;
		if (!timer.value) {
			animation.jg = true;
			timer.value = setTimeout(() => {
				animation.jg = false;
				timer.value = null;
				showAnimation.value = false;
			}, 6500);
		}
	}
};
</script>

<style lang="scss">
@keyframes rotate {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.music {
	animation: rotate 6s linear infinite;
}

page {
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
}

.ancestral_detail_bgc {
	width: 100vw;
	height: 100vh;
	position: fixed;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	z-index: -1;
}

.content {
	// height: 100%;
	// position: relative;
	// // background-image: url('http://112.124.50.179:8888/imgs/home/temple_bgc.png');
	// background-repeat: no-repeat;
	// background-size: cover;
	// background-position: 100%;
	padding: 0 !important;
}

.header {
	/* #ifdef APP || H5 */
	height: 88rpx;
	/* #endif */
	/* #ifdef MP-WEIXIN */
	height: 80rpx;
	/* #endif */
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 32rpx;
	box-sizing: border-box;

	.header_records {
		width: 180rpx;
		height: 64rpx;
		background: rgba(14, 14, 14, 0.25);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 64rpx;
		text-align: center;
		z-index: 999999;
	}

	.header_con {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.back {
			width: 64rpx;

			image {
				width: 64rpx;
				height: 64rpx;
			}
		}

		.tabs {
			font-size: 32rpx;
			color: #c5c5c5;
			display: flex;
			align-items: center;
			padding-left: 144rpx;
			width: 100%;
			height: 100%;

			view:nth-child(2) {
				padding-left: 64rpx;
			}
		}

		.header_icon {
			display: flex;

			image {
				width: 64rpx;
				height: 64rpx;
				margin-left: 32rpx;
			}
		}
	}
}

.active {
	color: #fff !important;
}

.temple_detail_bgc {
	width: 100vw;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	z-index: -1;
}

.temple_detail {
	color: #fff;
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	flex-direction: column;

	.fixed_con_ {
		position: absolute;
		display: flex;
		flex-direction: column;
		position: absolute;
		align-items: center;
		width: 116rpx;
		left: 32rpx;
		top: 164rpx;

		image {
			width: 104rpx;
			height: 104rpx;
		}

		text {
			font-weight: 500;
			font-size: 18rpx;
			color: #ffffff;
			line-height: 18rpx;
			text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
			white-space: nowrap;
			position: absolute;
			bottom: -18rpx;
		}
	}

	.temple_detail_name {
		width: 372rpx;
		height: 176rpx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		.temple_detail_name_text {
			font-family: '宋体';
			font-weight: 600;
			font-size: 52rpx;
			color: #ecb950;
			line-height: 62rpx;
			letter-spacing: 1px;
			direction: rtl;
			z-index: 2;
		}
	}
}

.temple_detail_tablet {
	margin-top: 12vh;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	
	.chair_top{
		width: 412rpx;
		height: 370rpx;
	}
	
	.chair_bottom{
		width: 520rpx;
		height: 258rpx;
	}

	image {
		// position: absolute;
		// top: 0;
		// left: 0;
		// width: 100%;
		// height: 100%;
	}

	.temple_detail_tablet_middle {
		position: absolute;
		width: 74rpx;
		height: 166rpx;
		top: -90rpx;
		display: flex;
		justify-content: center;

		image {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		view {
			font-family: '宋体';
			font-weight: 400;
			font-size: 16rpx;
			color: #f7cca1;
			writing-mode: vertical-lr;
			z-index: 2;
			width: 30rpx;
			height: 90rpx;
			margin-top: 25rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			/* #ifdef APP */
			padding-right: 4rpx;
			box-sizing: border-box;
			/* #endif */
			/* #ifdef H5 */
			transform: scale(0.8);
			/* #endif */
		}
	}

	.temple_detail_row {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		position: absolute;

		.temple_detail_left {
			display: flex;
		}

		.temple_detail_right {
			display: flex;
		}

		.temple_detail_tablet_item {
			width: 50rpx;
			height: 96rpx;
			position: relative;
			display: inline-block;
			margin-right: 40rpx;
			z-index: 3;
			display: flex;
			justify-content: center;

			&:last-child {
				margin-right: 0 !important;
			}

			image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}

			.tablet_name {
				width: 25rpx;
				height: 60rpx;
				font-weight: 400;
				font-size: 12rpx;
				color: #f7cca1;
				line-height: 16rpx;
				letter-spacing: 1rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				white-space: nowrap;
				word-break: break-all;
				z-index: 0;
			}

			.tablet_name_chinese {
				writing-mode: vertical-lr;
				/* #ifdef H5 */
				transform: scale(0.6);
				/* #endif */
				/* #ifdef APP */
				padding-right: 3rpx;
				box-sizing: border-box;
				/* #endif */
			}
		}
	}
}

.invite {
	background: rgba(0, 0, 0, 0.2);
	// width: 188rpx;
	padding: 0 16rpx;
	height: 54rpx;
	border-radius: 0 27rpx 27rpx 0;
	color: #fff;
	font-size: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 30vh;
	left: 0;

	image {
		padding-left: 4rpx;
		width: 32rpx;
		height: 32rpx;
	}
}

.fixed {
	position: fixed;
	bottom: calc(constant(safe-area-inset-bottom));
	bottom: calc(env(safe-area-inset-bottom));
	left: 0;
	right: 0;
	padding: 24rpx 32rpx;
	// padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
	// padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
	z-index: 1;

	@media screen and (min-width: 992px) {
		width: 828rpx;
		margin: 0 auto;
		box-sizing: border-box;
	}

	.fixed_con {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 38rpx;
		flex-wrap: nowrap;
		height: 144rpx;

		.fixed_con_ {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			text {
				font-weight: bold;
				font-size: 28rpx;
				color: #ffffff;
				line-height: 42rpx;
				letter-spacing: 1px;
				text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
				text-stroke: 1px #8d5d2c;
				text-align: center;
				font-style: normal;
				text-transform: none;
				-webkit-text-stroke: 1px #8d5d2c;
				position: absolute;
				bottom: -8rpx;
			}
		}

		image {
			width: 144rpx;
			height: 144rpx;
		}
	}
}

.temple_detail_funcList {
	position: fixed;
	bottom: 10vh;
	z-index: 2;

	.temple_detail_fucItem {
		display: flex;
		align-items: center;
		flex-direction: column;
		margin-bottom: 40rpx;
		font-weight: bold;
		font-size: 20rpx;
		color: #ffffff;
		line-height: 20rpx;

		image {
			width: 64rpx;
			height: 64rpx;
			margin-bottom: 12rpx;
		}
	}
}

.texiao_box {
	.gif {
		position: absolute;
		left: 50%;
		bottom: 25vh;
		transform: translateX(-50%);
		z-index: 99;

		.gb,
		.jg {
			width: 450rpx;
		}
	}
}
</style>
